<template>
  <div v-loading="dataLoading" class="app-container">
    <div class="data-content">
      <span style="font-size: x-large">{{ $t('inboundScan') }}</span>
      <div style="display: flex; margin-top: 20px;">
        <el-select v-model="inboundType">
          <el-option value="StandardInbound" :label="$t('standardInbound')" />
          <el-option value="FastInbound" :label="$t('fastInbound')" />
          <el-option value="SkuInbound" :label="$t('skuInbound')" />
        </el-select>
        <el-input
          ref="orderNoInput"
          v-model="orderNo"
          :placeholder="$t('inbound.pleaseScanOrderNo')"
          clearable
          style="flex: 1; margin-left: 10px;"
          @keyup.enter.native.prevent="handleScan"
        >
          <i slot="prefix" class="el-icon-full-screen scan-icon" />
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { scanFail, scanSuccess } from '@/utils/validate';
import { scanOrderInfo } from '@/api/business/warehouseManage/inbound';

export default {
  name: 'InboundScan',
  components: {},
  data() {
    return {
      dataLoading: false,
      inboundType: 'StandardInbound',
      orderNo: null,
    }
  },
  created() {
  },
  activated() {
    this.$refs.orderNoInput.focus()
  },
  methods: {
    handleScan() {
      this.dataLoading = true;
      scanOrderInfo({ orderNo: this.orderNo }).then(res => {
        if (!res || res.returnCode !== 10000) {
          scanFail()
        } else {
          scanSuccess()
          this.$router.push({ name: this.inboundType, params: { orderNo: this.orderNo }})
        }
      }).catch(() => {
        scanFail()
      }).finally(() => {
        this.orderNo = null
        this.dataLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.el-form-item {
  margin-bottom: 0px;
}

.el-col {
  padding: 18px 0 18px 0;
}

.query-form {
  padding: 0 18px 0 18px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.data-content{
  padding: 20px;
  flex: 1;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

  ::v-deep .el-input__inner {
    height: 80px;
    padding-left: 55px;
  }

  .scan-icon {
    margin: 25px 15px 0 10px;
    font-size: 30px
  }
}
</style>
